import React, { useState } from "react";
import Header from "@/components/Header";
import {
  Input,
  Select,
  Table,
  Button,
  TableColumnsType,
  Form,
  Tabs,
} from "antd";
import type { TabsProps } from "antd";
import "./raise.scss";
// 内容
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}
const onChange = (key: string) => {
  console.log(key);
};

const items: TabsProps["items"] = [
  {
    key: "1",
    label: "待保养",
    children: "222",
  },
  {
    key: "2",
    label: "保养中",
    children: "Content of Tab Pane 2",
  },
  {
    key: "3",
    label: "保养历史",
    children: "Content of Tab Pane 3",
  },
];
const columns: TableColumnsType<DataType> = [
  {
    title: "车型/照片",
    width: 100,
    dataIndex: "name",
    key: "id",
  },
  {
    title: "名称",
    width: 100,
    dataIndex: "age",
    key: "name",
  },
  {
    title: "所在地",
    dataIndex: "address",
    key: "native",
    width: 150,
  },
  {
    title: "详细地址",
    dataIndex: "address",
    key: "2",
    width: 150,
  },
  {
    title: "负责人",
    dataIndex: "address",
    key: "person",
    width: 150,
  },
  {
    title: "联系电话",
    dataIndex: "address",
    key: "phone",
    width: 150,
  },
  {
    title: "营业时间",
    dataIndex: "address",
    key: "time",
    width: 150,
  },
  {
    title: "门店状态",
    dataIndex: "address",
    key: "status",
    width: 150,
  },
  {
    title: "员工人数",
    dataIndex: "address",
    key: "counter",
  },
  { title: "车辆数", dataIndex: "address", key: "8" },
  {
    title: "操作",
    key: "operation",
    fixed: "right",
    width: 150,
    render: () => {
      return (
        <div>
          <Button>创建保养</Button>
          <Button type="primary" style={{ marginBottom: "5px" }}>
            修改信息
          </Button>
        </div>
      );
    },
  },
];
const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}
type SizeType = Parameters<typeof Form>[0]["size"];
export default function MessageVehicle() {
  const [componentSize, setComponentSize] = useState<SizeType | "default">(
    "default"
  );
  const onFormLayoutChange = ({ size }: { size: SizeType }) => {
    setComponentSize(size);
  };
  return (
    <div className="storeBigBox">
      <Header title="车辆管理" />
      <Form
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        layout="inline"
        initialValues={{ size: componentSize }}
        onValuesChange={onFormLayoutChange}
        size={componentSize as SizeType}
        style={{ marginTop: "5px" }}
      >
        <Form.Item label="搜索车型" style={{ width: "300px" }}>
          <Input placeholder="请输入内容" />
        </Form.Item>
        <Form.Item label="运营状态" style={{ width: "300px" }}>
          <Select placeholder="请选择状态">
            <Select.Option value="demo">Demo</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="所属门店" style={{ width: "300px" }}>
          <Select placeholder="请选择门店">
            <Select.Option value="demo">Demo</Select.Option>
          </Select>
        </Form.Item>
      </Form>
      <div className="storeContent">
        <Button type="primary" style={{ float: "right", marginBottom: "10px" }}>
          提醒设置
        </Button>
        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
        <Table
          columns={columns}
          dataSource={data}
          scroll={{ x: 1500, y: 350 }}
        />
      </div>
    </div>
  );
}
